<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 如果当前浏览器不支持canvas 会输出提示信息 -->
    <canvas
      id="canvas_1"
      width="1200"
      height="600"
      style="box-shadow: 0px 0px 20px black"
    >
      当前浏览器不支持 canvas
    </canvas>
  </body>

  <script>
    // 获取 canvas元素对应的 DOM对象
    const c = document.querySelector("#canvas_1");

    // 获取在 canvas 上绘图的 canvasRenderingContext2D 对象，
    const ctx = c.getContext("2d");

    // 绘制
    ctx.beginPath(); // 开始绘制
    ctx.arc(100, 50, 40, 0, Math.PI * 2); // arc 弧
    ctx.strokeStyle = "blue";
    ctx.fillStyle = "#ff0";
    ctx.fill(); // 填充
    ctx.stroke();
  </script>
</html>
